<template>
	<view>
		<base-wrapper-scroll @onPushRefresh="onPushRefresh" :activeTabName="'list'" :loadmoreStatus="status">
			<view class="contact w-full">
				<view class="flex bg-color-white p-20 m-y-20 b-rd-6" v-for="v in list" :key="v.id">
					<up-image :show-loading="true" :src="v.pic" width="200rpx" height="200rpx"
						radius="10rpx"></up-image>
					<view class="flex-1 flex-c-around-start m-l-10">
						<up-text bold color="#000" size="32rpx" lines="1" :text="v.title"></up-text>
						<up-text color="#AAA" size="28rpx" lines="2" :text="v.info"></up-text>
						<view class="flex-r-between-center m-t-10">
							<view class="m-r-10" v-for="(item, index) in v.tags" :key="index">
								<up-tag :text="item" type="warning" shape="circle" size="mini"></up-tag>
							</view>
						</view>
					</view>
				</view>
			</view>
		</base-wrapper-scroll>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue";

	const list = ref([{
			id: 1,
			pic: "https://img1.baidu.com/it/u=1117949050,2033758512&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
			title: "辽宁省林业大数据监控平台已完成测试阶段。",
			info: "由大连东软信息学院林业创新团队研发，已部署在云平台。",
			tags: ["1", "2", "3"],
		},
		{
			id: 2,
			pic: "https://img1.baidu.com/it/u=1117949050,2033758512&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
			title: "辽宁省林业大数据监控平台已完成测试阶段。",
			info: "由大连东软信息学院林业创新团队研发，已部署在云平台。",
			tags: ["1", "2", "3"],
		},
		{
			id: 3,
			pic: "https://img1.baidu.com/it/u=1117949050,2033758512&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
			title: "辽宁省林业大数据监控平台已完成测试阶段。",
			info: "由大连东软信息学院林业创新团队研发，已部署在云平台。",
			tags: ["1", "2", "3"],
		},
		{
			id: 4,
			pic: "https://img1.baidu.com/it/u=1117949050,2033758512&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
			title: "辽宁省林业大数据监控平台已完成测试阶段。",
			info: "由大连东软信息学院林业创新团队研发，已部署在云平台。",
			tags: ["1", "2", "3"],
		},
		{
			id: 5,
			pic: "https://img1.baidu.com/it/u=1117949050,2033758512&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
			title: "辽宁省林业大数据监控平台已完成测试阶段。",
			info: "由大连东软信息学院林业创新团队研发，已部署在云平台。",
			tags: ["1", "2", "3"],
		},
	]);
	const page = ref(0);
	const status = ref(
		computed(() => {
			if (list.value.length > 30) {
				return "loadmore";
			} else {
				return "nomore";
			}
		})
	);

	function onPushRefresh() {
		if (list.value.length < 30) {
			return;
		}
		status.value = "loading";
		page.value++;
		setTimeout(() => {
			list.value += 1;
			status.value = "loadmore";
		}, 1000);
	}
</script>

<style></style>